<template>
    <vue-context-menu :contextMenuData="contextMenuData"
                      @nameSortHandle="nameSortHandle"
                      @typeSortHandle="typeSortHandle"
                      @sizeSortHandle="sizeSortHandle"
                      @modifySortHandle="modifySortHandle"
                      @creationSortHandle="creationSortHandle"
                      @newFolderHandle="newFolderHandle('folder')"
                      @newTextHandle="newFolderHandle('text')"
                      @newWordHandle="newFolderHandle('word')"
                      @newExcelHandle="newFolderHandle('excel')"
                      @newPPtHandle="newFolderHandle('ppt')"
                      @pasteHandle="pasteHandle"></vue-context-menu>
</template>
<script>
import { mapState } from 'vuex';
import { bus, getName } from '@/utils/public';

const POSITION = Symbol('position');
const REVERSAL = Symbol('reversal');
export default {
  props: ['list'],
  data() {
    return {
      currentSort: {
        name: '',
        order: '',
      },
      coordinate: {
        x: '',
        y: '',
      },
    };
  },
  computed: {
    contextMenuData() {
      return {
        menuName: 'contextMainMenu',
        axis: {
          x: this.coordinate.x,
          y: this.coordinate.y,
        },
        // 菜单选项
        menulists: [
          {
            fnHandler: 'newFolderHandle',
            icoName: 'menu_icon folder', // icon图标
            btnName: this.$t('new folder'), // 菜单名称
          },
          {
            fnHandler: 'newTextHandle',
            icoName: 'menu_icon text', // icon图标
            btnName: this.$t('new text document'), // 菜单名称
          },
          {
            fnHandler: 'newWordHandle',
            icoName: 'menu_icon doc', // icon图标
            btnName: this.$t('new document'), // 菜单名称
          },
          {
            fnHandler: 'newExcelHandle',
            icoName: 'menu_icon spr', // icon图标
            btnName: this.$t('new spreadsheet'), // 菜单名称
          },
          {
            fnHandler: 'newPPtHandle',
            icoName: 'menu_icon pre', // icon图标
            btnName: this.$t('new presentation'), // 菜单名称
          },
          {
            icoName: 'el-icon-document-copy', // icon图标
            btnName: this.$t('paste'), // 菜单名称
            fnHandler: 'pasteHandle',
            disabled: !this.copyList.length,
          },
          {
            fnHandler: 'sortHandle', // 绑定事件
            icoName: 'el-icon-sort', // icon图标
            btnName: this.$t('sortord'), // 菜单名称
            children: [
              {
                icoName: this.getIcoName('name'),
                fnHandler: 'nameSortHandle',
                btnName: this.$t('name'),
                /* children: [
                {btnName: this.$t('positive'), fnHandler: "nameSortHandle"},
                {btnName: this.$t('reversal'), fnHandler: "nameReversalSortHandle"}
                ] */
              },
              {
                icoName: this.getIcoName('type'),
                fnHandler: 'typeSortHandle',
                btnName: this.$t('type'),
                /* children: [
                {btnName: this.$t('positive'), fnHandler: "typeSortHandle"},
                {btnName: this.$t('reversal'), fnHandler: "typeReversalSortHandle"}
                ] */
              },
              {
                icoName: this.getIcoName('size'),
                fnHandler: 'sizeSortHandle',
                btnName: this.$t('size'),
                /* children: [
                {btnName: this.$t('positive'), fnHandler: "sizeSortHandle"},
                {btnName: this.$t('reversal'), fnHandler: "sizeReversalSortHandle"}
                ] */
              },
              {
                icoName: this.getIcoName('creation'),
                fnHandler: 'creationSortHandle',
                btnName: this.$t('creation date'),
                /* children: [
                {btnName: this.$t('positive'), fnHandler: "dateSortHandle"},
                {btnName: this.$t('reversal'), fnHandler: "dateReversalSortHandle"}
                ] */
              },
              {
                icoName: this.getIcoName('modification'),
                fnHandler: 'modifySortHandle',
                btnName: this.$t('modification date'),
                /* children: [
                {btnName: this.$t('positive'), fnHandler: "dateSortHandle"},
                {btnName: this.$t('reversal'), fnHandler: "dateReversalSortHandle"}
                ] */
              },
            ],
          }],
      };
    },
    ...mapState('copy', [
      'copyList',
    ]),
  },
  mounted() {
    this.getSaveOrder();
    this.hideMenu();
    bus.$on('hideMainRightMenu', this.hideMenu);
  },
  beforeDestroy() {
    bus.$off('hideMainRightMenu');
  },
  methods: {
    newFolderHandle(type) {
      let name;
      switch (type) {
        case 'folder':
          // type = 'folder'
          name = getName(this.list, { name: '新建文件夹', type }, true);
          break;
        case 'text':
          // type = 'text'
          name = getName(this.list, { name: '新建文本文档', type }, true);
          break;
        case 'word':
          // type = 'word'
          name = getName(this.list, { name: 'Document', type }, true);
          break;
        case 'excel':
          // type = 'excel'
          name = getName(this.list, { name: 'Spreadsheet', type }, true);
          break;
        case 'ppt':
          // type = 'ppt'
          name = getName(this.list, { name: 'Presentation', type }, true);
          break;
        default:
          break;
      }
      this.$emit('change', { name, type });
      // this.list.unshift({
      //   name: name,
      //   type: type,
      //   net: true,
      //   rename: true,
      //   isCatch: false,
      //   percentage: 0,
      //   syn: false,
      //   size: (Math.random() * 1000),
      //   modification: new Date().getTime(),
      //   creation: new Date().getTime(),
      // });
    },
    getSaveOrder() {
      if (window.localStorage && window.localStorage.getItem('sort')) {
        const args = window.localStorage.getItem('sort').split(' ');
        if (args[1] === 'undefined') {
          this.sortHandle(args[0]);
          this.setCurrentSort(args[0], POSITION);
        } else {
          this.sortHandle(args[0], args[1]);
          this.setCurrentSort(args[0], REVERSAL);
        }
      } else {
        this.initSort();
      }
    },
    setCurrentSort(name, order) {
      this.currentSort.name = name;
      this.currentSort.order = order;
    },
    getIcoName(name) {
      if (this.currentSort.name === name) {
        if (this.currentSort.order === POSITION) {
          return 'l10 el-icon-sort-up';
        } if (this.currentSort.order === REVERSAL) {
          return 'l10 el-icon-sort-down';
        }
      }
      return '';
    },
    initSort() {
      // if (this.list.length) {
      //   const type = 'creation';
      //   const folderList = this.list.filter((item) => item.type === 'folder');
      //   const noFolderList = this.list.filter((item) => item.type !== 'folder');
      //   const folderLists = this.sortHandle(type, true, folderList);
      //   const noFolderLists = this.sortHandle(type, true, noFolderList);
      //   // TODO 问一下改变props的问题
      //   this.list.length = 0;
      //   this.list.push(...folderLists, ...noFolderLists);
      // }
    },
    nameSortHandle() {
      this.sortFromCurrentHandle('name');
    },
    typeSortHandle() {
      this.sortFromCurrentHandle('type');
    },
    sizeSortHandle() {
      this.sortFromCurrentHandle('size');
    },
    modifySortHandle() {
      this.sortFromCurrentHandle('modification');
    },
    creationSortHandle() {
      this.sortFromCurrentHandle('creation');
    },
    sortHandle(attr, reversal, target) {
      const compare = function (obj1, obj2) {
        const val1 = obj1[attr];
        const val2 = obj2[attr];
        if (val1 < val2) {
          return reversal ? 1 : -1;
        } if (val1 > val2) {
          return reversal ? -1 : 1;
        }
        return 0;
      };
      if (target) {
        return target.sort(compare);
      }
      // this.list = this.list.sort(compare);
      if (window.localStorage) {
        window.localStorage.setItem('sort', `${attr} ${reversal}`);
      }
      // TODO 还需要逻辑确认
      return 0;
    },
    sortFromCurrentHandle(attr) {
      this.hideMenu();
      if (this.currentSort.name !== attr) {
        this.setCurrentSort(attr, POSITION);
        return this.sortHandle(attr);
      }
      if (this.currentSort.order === POSITION) {
        this.setCurrentSort(attr, REVERSAL);
        return this.sortHandle(attr, true);
      }
      this.setCurrentSort(attr, POSITION);
      return this.sortHandle(attr);
    },
    showMenu(event) {
      event.preventDefault();
      let x = event.clientX;
      const bodyw = document.body.clientWidth;
      const rw = bodyw - x;
      if (rw < 207) {
        x = event.clientX - (207 - rw);
      }
      const y = event.clientY;
      // Get the current location
      this.coordinate = { x, y };
    },
    hideMenu() {
      setTimeout(() => {
        const menuName = `vue-contextmenuName-${this.contextMenuData.menuName}`;
        const menu = document.getElementsByClassName(menuName)[0];
        menu.style.display = 'none';
      }, 0);
    },
    addNameIndex(oname) {
      const repetList = this.list.filter((litem) => !litem.delete && litem.name === oname); let
        name;
      if (repetList.length) {
        name = [oname, 'copy'].join('_');
        // if (oname.indexOf('_') < 0) {
        //     name = [oname, 1].join('_');
        // } else {
        //     let nameArray = oname.split('_');
        //     let index = nameArray.pop();
        //     if (+index) {
        //         nameArray.push(++index);
        //         name = nameArray.join('_');
        //     } else {
        //         name = [oname, 1].join('_');
        //     }
        // }
      } else {
        name = oname.name;
      }
      return name;
    },
    pasteHandle() {
      // if (!this.copyList.length) return;
      // this.copyList.forEach((item) => {
      //   const name = getName(this.list, item);
      //   const copyItme = {
      //     ...item,
      //     name,
      //     net: true,
      //     isCatch: false,
      //     percentage: 0,
      //     syn: false,
      //     size: (Math.random() * 1000),
      //     modification: new Date().getTime(),
      //     creation: new Date().getTime(),
      //   };
      //   // this.list.push(copyItme);
      // });
      // this.$store.commit('copy/clearHandle', this.currentItem);
    },
  },
};
</script>
<style>
</style>
